<template>
<div>
  <img :src="selected">
  <Button @click="getVideo()">开始视频</Button>
  <el-button type="primary" plain @click="start">点击开始定时器</el-button>
  <el-button type="primary" plain @click="end">点击结束定时器</el-button>
</div>
</template>

<script>
import {getVideoImg} from "../../../../api/data";

export default {
  name: "complaint-component",
  data() {
    return {
      time: null,
      selected: "",
      index:0,
      imgSrc: [

      ]
    }
  },
  methods: {
    changeImg(){
      this.selected=this.imgSrc[this.index];
      this.index++;
      if(this.index==50){
        this.index=0;
      }
    },
    startVideo(){
      const that=this;
      this.timer = setInterval(()=>{
        that.selected=that.imgSrc[this.index];
        that.index++;
        if(that.index==10){
          that.index=0;
        }
      },500);
    },
    getVideo(){
      const that=this;
      const base=250;
      this.timer = setInterval(()=>{
        that.selected=require("../img/"+(250+that.index)+".png")
        that.index++;
        if(that.index==50){
          that.index=0;
        }
      },200);
    },
    start() {
      // 将定时器名字赋值到变量中
      this.timer = setInterval(() => {
        console.log("开始---");
      }, 1000);
    },
    end() {
      clearInterval(this.timer);
      this.timer = null // 这里最好清除一下，回归默认值
      // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。
      console.log(this.timer);
    },
  },
  beforeDestroy() {
    // js提供的clearInterval方法用来清除定时器
    clearInterval(this.timer);
  },
  mounted() {
  }
}

</script>

<style scoped>

</style>
